<template>
    <div class="big_box">
        <div class="big_box_left">
            <!-- 关联取消BOM按钮 -->
            <el-row class="btn_box">
                <el-button type="info" size="medium" plain @click="relevance = true" >关联BOM</el-button>
                <el-button type="info" plain @click="cancelCorr">取消关联</el-button>
            </el-row>


            <el-tree :props="props" class="treeClass" :ref="tree" :node-key="id" :default-expand-all="false"
                :data="treeData" :load="loadNode" @check-change="handleCheckChangetree" show-checkbox>
            </el-tree>


        </div>
        <div class="big_box_right">
            <ul class="big_box_right_bg_box">
                <li class="big_box_right_box" v-for="(v,i) in bList" :key="v.id" @click="clickbom(v.id,v.bomNo)">
                    {{  v.bomName  }}</li>
            </ul>

            <el-row style="margin-left:55px;">
                <el-button type="success" @click="dialogVisible = true">添加零件</el-button>
                <el-button type="primary" @click="newlyBom">新增BOM</el-button>
                <el-button type="primary" @click="del">删除BOM</el-button>
            </el-row>
            <el-table v-loading="loading" :data="bomInfoList">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" align="center" prop="id" />
                <el-table-column label="零件编号" align="center" prop="partsNo" />
                <el-table-column label="零件名称" align="center" prop="partsName" />
                <el-table-column label="规格" align="center" prop="specifications" />
                <el-table-column label="材质" align="center" prop="texture" />
                <el-table-column label="长度" align="center" prop="length" />
                <el-table-column label="单净重量" align="center" prop="netWeight" />
                <el-table-column label="数量" align="center" prop="count" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['project:partstInfo:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 关联弹出框 -->
            <el-dialog center title="关联BOM" :visible.sync="relevance" width="40%">
              <div style="margin-top: 20px">

                <div style="margin-top: 20px">
                  <el-radio-group v-model="formData.type" >
                    <el-radio-button
                      v-for="(item, index) in bList"
                      :key="index"
                      :label="item.id"
                      @click.native="bindingClickbom(item.id,item.bomNo)"
                    >
                      {{ item.bomName }}
                    </el-radio-button>
                  </el-radio-group>
                </div>

              </div>
              <span slot="footer" class="dialog-footer">
                    <el-button @click="DelBom = false">取 消</el-button>
                    <el-button type="primary" @click="relevance1">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 取消关联弹出框 -->
            <el-dialog center title="取消关联" :visible.sync="Disassociation" width="40%">
                <div style="margin-top: 20px">

                    <el-checkbox v-model="checked3" label="BOM1" border size="medium"></el-checkbox>
                    <!-- <el-checkbox v-model="checked4" label="BOM2" border size="medium"></el-checkbox> -->
                    <!-- <el-checkbox v-model="checked5" label="BOM3" border size="medium"></el-checkbox>
                    <el-checkbox v-model="checked6" label="BOM4" border size="medium"></el-checkbox> -->
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="Disassociation = false">取 消</el-button>
                    <el-button type="primary" @click="Disassociation = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 删除bom框 -->
            <el-dialog center title="删除bom" :visible.sync="DelBom" width="40%">
                <div style="margin-top: 20px">

                  <div style="margin-top: 20px">
<!--                    <template slot-scope="scope">
                      <el-radio-group v-model="scope.row.radio" size="small">
                        <el-radio border v-for="(v , i) in scope.row.bList" :key="v.id">{{  v.bomName  }}</el-radio>
                      </el-radio-group>
                    </template>-->
                    <el-radio-group v-model="formData.type" >
                      <el-radio-button
                        v-for="(item, index) in bList"
                        :key="index"
                        :label="item.id"
                        @click.native="delclickbom(item.id,item.bomNo)"
                      >
                        {{ item.bomName }}
                      </el-radio-button>
                    </el-radio-group>
                  </div>

                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="DelBom = false">取 消</el-button>
                    <el-button type="primary" @click="DelBombtn">确 定</el-button>
                </span>
            </el-dialog>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
            <!-- 添加零件弹窗 -->
            <el-dialog title="添加零件" :visible.sync="dialogVisible" width="100%">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                    label-width="68px">
                    <el-form-item label="零件编号" prop="partsNo">
                        <el-input v-model="queryParams.partsNo" placeholder="请输入零件编号" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="零件名称" prop="partsName">
                        <el-input v-model="queryParams.partsName" placeholder="请输入零件名称" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="零件规格" prop="specifications">
                        <el-input v-model="queryParams.specifications" placeholder="请输入规格" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible1">确 定</el-button>
                </span>

                <el-table v-loading="loading" :data="partstInfoList"   @selection-change="handleSelectionChangeAddSpareParts">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="序号" align="center" prop="id" />
                    <el-table-column label="零件编号" align="center" prop="partsNo" />
                    <el-table-column label="零件名称" align="center" prop="partsName" />
                    <el-table-column label="规格" align="center" prop="specifications" />
                    <el-table-column label="材质" align="center" prop="texture" />
                    <el-table-column label="长度" align="center" prop="length" />
                    <el-table-column label="单净重量" align="center" prop="netWeight" />
                    <el-table-column label="数量" align="center" prop="count">
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.count" @change="inputChangeNumber(scope.row)"
                                         controls-position="right" :min="0" :max="scope.row.remainderCount" label="描述文字">
                        </el-input-number>
                      </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-dialog>
        </div>
        <!-- 新增bom弹窗 -->
        <el-dialog title="新增BOM" :visible.sync="newBom" width="60%">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="68px">
                <el-form-item label="零件编号" prop="partsNo">
                    <el-input v-model="queryParams.partsNo" placeholder="请输入零件编号" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="零件名称" prop="partsName">
                    <el-input v-model="queryParams.partsName" placeholder="请输入零件名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="零件规格" prop="specifications">
                    <el-input v-model="queryParams.specifications" placeholder="请输入规格" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="newBappend" @selection-change="handleSelectionChange1">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" width="55" align="center" prop="id" />
                <el-table-column label="零件编号" align="center" prop="partsNo" />
                <el-table-column label="零件名称" width="100" align="center" prop="partsName" />
                <el-table-column label="规格" width="100" align="center" prop="specifications" />
                <el-table-column label="材质" width="100" align="center" prop="texture" />
                <el-table-column label="长度" width="100" align="center" prop="length" />
                <el-table-column label="单净重量" width="100" align="center" prop="netWeight" />
              <el-table-column label="数量" align="center" prop="count" >
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.count"
                                   controls-position="right" :min="0"  label="描述文字">
                  </el-input-number>
                </template>
              </el-table-column>

            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newBom2">取 消</el-button>
                <el-button type="primary" @click="newBomEnt">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
  listPartstInfo,
  getPartstInfo,
  delPartstInfo,
  addPartstInfo,
  updatePartstInfo,
  Increased,
  seeAbout,
  bindingBom,
  delBomPartstInfo, delBom, unbindingBom
} from "@/api/project/partstInfo";
import { Floor } from "@/api/project/info";
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { resolve } from "path";
import LogoVue from "../../layout/components/Sidebar/Logo.vue";
export default {
    components: {
        Treeselect
    },
    data() {
        return {
          formData: {
            fileName: undefined,
            type: 'file'
          },
          selectionChangeAddSpareParts:[],
            radio3:'',
            treeData: [], //树的数据源
            treeBomId: [],
            nod: {
                label: '',
                children: []
            },
            bomNo: "",
            bomId: "",

            delBomNo: "",
            delBomId: "",

          bindingBomNo: "",
          bindingBomId: "",
            // 楼栋
            building: [],
            count: 0,
            props: {
                label: 'label',
                children: 'children'
            },
            mod: [],
            checked3: false,
            checked4: true,
            relevance: false,
            DelBom: false,
            Disassociation: false,
            newBom: false,
            dialogVisible: false,
            bList: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            addBomIds: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 零件信息表格数据
            partstInfoList: [],
            // 新增bom信息数据
            newBappend: [],
            // 弹出层标题
            title: "",
            bomList: [],
          bomInfoList:[],
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                count: null,
                pageNum: 1,
                pageSize: 10,
                partsNo: null,
                partsName: null,
                specifications: null,
                projectNo: null,
                compomentNo: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
    },
    created() {

        Floor(this.$route.query.lo).then((ok) => {
            this.building = ok.data.build;
            var no = JSON.parse(JSON.stringify(this.nod));
            var i = 1;
            for (var key in this.building) {
                var n = JSON.parse(JSON.stringify(this.nod));

                n.label = key;
                n.id = i;
                i++;
                let arr = [];
                let s = this.building[key];
                for (let j = 0; j < s.length; j++) {
                    var n1 = JSON.parse(JSON.stringify(this.nod));
                    n1.id = s[j].id;
                    n1.label = s[j].floor;
                    n1.id = s[j].id;
                    n1.bomName = s[j].bomName;
                    arr.push(n1);
                }
                n.children = arr;
                this.treeData.push(n);
            }


            this.bList = ok.data.bom;
            this.id=ok.data.bom[0].id;
            this.bomInfoList=ok.data.bom[0].partstInfoList;
          this.bomId = ok.data.bom[0].id;
          this.bomNo = ok.data.bom[0].bomNo;

        });
        this.getList()
    },
    methods: {
      DelBombtn(){

        ////////////////////////
        delBom(this.delBomId).then(res => {
          this.$modal.msgSuccess("删除bom成功")
        })
        ////////////////////////
        this.DelBom = false
      },
      //获取选中零件
      handleSelectionChangeAddSpareParts(selection){
        this.selectionChangeAddSpareParts=selection;
      },
        // 删除bom
        del() {
            this.DelBom = true
          //////////////////////////
          // delBom(this.bomId).then(res => {
          //   console.log(res);
          // })
          //////////////////////////
        },
        handleCheckChangetree(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
            let id = data.id;

            if (checked) {
                this.treeBomId.push(id)
            } else {
                this.treeBomId = this.treeBomId.filter(e => e != id);
            }
            console.log(this.treeBomId)
        },


        clickbom(e,e2) {
            this.bomId = e;
            this.bomNo = e2;
          for (let i = 0; i <this.bList.length ; i++) {
            if(this.bList[i].id==e){
              this.bomInfoList=this.bList[i].partstInfoList;
            }
          }
          console.log(e)

        },
      bindingClickbom(e,e2) {
        this.bindingBomId = e;
        this.bindingBomNo = e2;
      },
      delclickbom(e,e2) {
        this.delBomId = e;
        this.delBomNo = e2;
      },
        handleSelectionChange1(selection) {
            for (let i = 0; i < selection.length; i++) {
                selection[i].partstId = selection[i].partsNo
            }
            this.addBomIds = selection;
        },
        dialogVisible1() {

            let params=JSON.parse(JSON.stringify(this.selectionChangeAddSpareParts));
          console.log(params)
            let data=[];
            for (let i=0;i<params.length;i++){
              var p={};
              p.bomId=this.bomNo;
              p.partstId=params[i].partsNo;
              p.count=params[i].count;
              data.push(p);
            }

          addPartstInfo({"bomPartstRefList":data}).then(res => {
                console.log(res);
                this.getList();
                this.$modal.msgSuccess("新增成功");
            })
            this.dialogVisible = false
        },
        // 新增BOM
        newlyBom() {
            this.newBom = true
            listPartstInfo(this.queryParams).then(response => {
                for (let i=0;i<response.rows.length;i++){
                  response.rows[i]["count"]=0;
                }
               this.newBappend = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        newBom2() {
            this.newBom = false
        },
        newBomEnt() {

            this.newBom = false;
            this.$modal.msgSuccess("BOM新增成功");

            Increased(this.$route.query.lo, this.$route.query.po, this.addBomIds).then(res => {
                console.log(res)
            })
        },

        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve([{ name: 'region' }]);
            }
            if (node.level > 1) return resolve([]);

            setTimeout(() => {
                const data = [{
                    name: 'zone'
                }];

                resolve(data);
            }, 500);
        },
        handleChange(value) {
            console.log(value);
        },
      ////////////////////////////////////绑定bom
        relevance1() {

            bindingBom({
                "bomNo": this.bindingBomNo,
                "floorId": [
                    ...this.treeBomId
                ]
            }).then(res => {
              this.$modal.msgSuccess("绑定成功")
            })
          this.relevance = false;


        },
      //////////////////////////解绑
        cancelCorr() {
          this.treeBomId
          // this.Disassociation = true;
          if (this.treeBomId.length==0){
            this.$modal.msgSuccess("请选择楼栋后操作")
            return false;
          }
          unbindingBom({"floorId":this.treeBomId}).then(res => {
            this.$modal.msgSuccess("解绑成功")
          })
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                projectNo: null,
                partsNo: null,
                partsName: null,
                specifications: null,
                texture: null,
                length: null,
                count: null,
                grossWeight: null,
                netWeight: null,
                createTime: null,
                createBy: null,
                comment: null
            };
            this.resetForm("form");
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          console.log(row)

            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除零件信息编号为"' + ids + '"的数据项？').then(function () {
                return delBomPartstInfo(row.id);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 查询零件信息列表 */
        getList() {
            this.loading = true;
            listPartstInfo(this.queryParams).then(response => {
              for(let i=0;i<response.rows.length;i++){
                response.rows[i].count=0;
              }
              this.partstInfoList = response.rows;

                this.total = response.total;
                this.loading = false;
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve(...this.image.png);
            }
            if (node.level > 3) return resolve([]);

            setTimeout(() => {
                const data = [
                    {
                        name: '1F',
                        leaf: true
                    },];

                resolve(data);
            }, 300);
        },
    }
}
</script>
<style scoped>
.big_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.big_box_left {
    width: 20%;
    height: 780px;
    border: 1px solid black;
    margin-left: 26px;
}

.big_box_right {
    width: 77%;
    /* height: 780px; */
}

.btn_box {
    margin: 15px 0 0 56px;
}

.big_box_right_bg_box {
    display: flex;
    justify-content: flex-start;
    list-style: none;
}

.big_box_right_box {
    margin-right: 10px;
    width: 150px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: antiquewhite;
}
</style>
